<template>
  <div class="hm-balance-card">
    <div class="" style="margin-left:8px; margin-top: 10px;">
      <image class="layer" :src="options.layer" />
      <div class="hd">
      </div>
	  
	  <view style="margin-left: 20px;">
		    <image :src="options.treePic" style="height: 50px; width:50px;float: left;"></image>
			<text class="bd" style="font-size: 20px; color: #575c5f; float: left; ">{{ options.bd }}</text>
	  </view>
	  
	  <div class="clear" ></div> 
	  
		<p style="width: 100%; margin-left: 20px;">
			<button style="border-radius: 50px; height: 30px; font-size: 15px; text-align: center;
			  			line-height: 30px; float: left; background-color: #ffffff; width: 45px;" 
						@click="clickButton(1)">浇水</button>
			<button style="border-radius: 50px; height: 30px; font-size: 15px; text-align: center;
						line-height: 30px;  float: left;margin-left: 10px; background-color: #ffffff; width: 45px;"
						 @click="clickButton(2)">施肥</button>
			<button style="border-radius: 50px; height: 30px; font-size: 15px; text-align: center;
						line-height: 30px;  float: left; margin-left: 10px; background-color: #ffffff; width: 45px;"
						 @click="clickButton(3)">种茶</button>
		</p>
		<div class="clear" ></div> 
		<!-- <text class="main" style="margin-top: 10px;">动态排行:</text> -->
		<text class="main" style="margin-top: 10px;">{{ options.title }}</text></br>
		<text class="main" style="margin-top: 10px;">{{ options.main }}</text>
		<text class="main" style="margin-top: 10px;">{{ options.main }}</text>
		<!-- <text class="main" style="margin-top: 10px;">{{ options.main }}</text> -->
		  <!-- <div class="ft">
			<div class="block">
			  <text class="date">{{ options.date }}</text>
			  <text class="word">{{ options.word }}</text>
			</div>
			<div class="group">
			  <text class="cvv">{{ options.cvv }}</text>
			  <text class="num">{{ options.num }}</text>
			</div>
			<image class="largeIcon" :src="options.largeIcon" />
		  </div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'HmBalanceCard',
  props: {
    dataId: {
      type: String,
      default: 'hm-balance-card'
    },
    options: {
      type: Object,
      default: function() {
        return {
          // layer:
          //   './images/img_25821_0_0.png',
          // info: '信用卡余额',
          // zhanghaoguanli:
          //   './images/img_25821_0_2.png',
          // bd: '¥12929.05',
          // main: '5326 5149 4497 1577',
          // date: '日期',
          // word: '12/24',
          // cvv: 'CVV',
          // num: '235',
          // largeIcon:
          //   './images/img_25821_0_1.png'
        };
      }
    }
  },
  data() {
    return {};
  },
  methods: {
	clickButton(id){
		switch(id){
			case 1:
				uni.showToast({
					icon: 'none',
					title:"浇水成功"
				})
				break;
			case 2:
				uni.showToast({
					icon: 'none',
					title:"施肥成功"
				})
				break;
			case 3:
				uni.showToast({
					icon: 'none',
					title:"种树成功"
				})
				break;
		}
	}
  }
};
</script>
<style>
@import './index.response.css';
.clear{ clear:both} 

</style>
